<!DOCTYPE html>
<html>
    <head>
        <title>GESPROY v1.0</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.1.min.css">
        <link rel="stylesheet"  href="css/estilo.css">
        <script src="js/static/jquery.js"></script>
        <script src="js/static/jquery.mobile-1.3.1.min.js"></script>
        <script src="js/manejadorbd.js"></script>        
    </head>
    <body>
        <section data-role="page" id="login" data-theme="b">
            <header data-role="header" data-theme="b" data-position="fixed">
                <h1>Iniciar Sesión</h1>
            </header>            
            <article data-role="content">

                <img src="images/logo.png" class="centrado" alt="" width="250"/>

                <form id="form_login">
                    <div data-role="fieldcontain">
                        <label for="txtemail">Correo electrónico:</label> 
                        <input type="email" id="txtemail" value="estudiante@correo.com" placeholder="Escribe aquí tu correo electrónico" />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="txtpassword">Contraseña:</label> 
                        <input type="password" name="txtpassword" id="txtpassword" value="123456" placeholder="Escribe aqu&iacute; tu contrase&ntilde;a" />
                    </div>
                    <input type="button" value="Iniciar Sesión" id="btnLogin" data-theme="e"/>                    
                </form>

                <br/>

                <center>
                    <a href="#recuperar" style="margin-top: 60px;">¿ Olvidaste tu contraseña ?</a>
                </center>

            </article>
        </section>

        <section data-role="dialog" id="recuperar" data-theme="b">
            <header data-role="header" data-theme="b" data-position="fixed">
                <h1>¿ Olvidaste tu contraseña ?</h1>
            </header>            
            <article data-role="content">

                <img src="images/logo.png" class="centrado" alt="" width="250"/>

                <form id="form_recuperar">
                    <div data-role="fieldcontain">
                        <label for="txtcorreo">Correo electrónico:</label> 
                        <input type="email" name="txtcorreo" id="txtcorreo" value="" placeholder="Escribe aquí tu correo electrónico" />
                    </div>
                    <input type="button" value="Recuperar contraseña" id="btnRecuperar" data-theme="e"/>                    
                </form>
            </article>            
        </section>

        <section data-role="dialog" id="ajustes" data-theme="b">
            <header data-role="header" data-theme="b">
                <h1>Cerrar sesión</h1>
            </header>            
            <article data-role="content">
                <center>
                    <p>¿ Seguro que quieres cerrar sesión ?</p>

                    <table>
                        <tr>
                            <td>
                                <a href="#" data-role="button"  data-rel="back" data-theme="a">No</a>
                            </td>
                            <td>
                                <a href="index.html" rel="external" data-role="button" data-theme="e">Cerrar Sesión</a>
                            </td>
                        </tr>
                    </table>
                </center>
            </article>
        </section>        

        <section id="error" data-role="dialog" data-theme="b">
            <header data-role="header" data-theme="b">
                <h1>Error</h1>
            </header>
            <article data-role="content">
                <center>
                    <p>Usuario o contraseña no valida</p>
                </center>
                <a href="#" data-role="button" data-rel="back" data-theme="b">Aceptar</a>
            </article>
        </section>        

        <section id="malo" data-role="dialog" data-theme="b">
            <header data-role="header" data-theme="b">
                <h1>Error</h1>
            </header>
            <article data-role="content">
                <center>
                    <p>Algo anda mal con la base de datos.</p>
                </center>
                <a href="#" data-role="button" data-rel="back" data-theme="b">Aceptar</a>
            </article>
        </section>                
    </body>
</html>
